<!--
 * @Author: Lw
 * @Date: 2022-08-29 15:29:24
 * @LastEditors: Lw
 * @LastEditTime: 2022-10-09 17:38:56
-->
<template>
  <n-modal
    v-model:show="show"
    :title="title?.length > 0 ? title : '详情'"
    preset="card"
    :bordered="true"
    :style="style"
    :header-style="headerStyle"
    :content-style="contentStyle"
    :unstableShowMask="false"
    :mask-closable="maskClosable"
    :on-after-leave="() => emit('update:show', false)"
  >
    <slot></slot>
  </n-modal>
  <!-- <Dialog v-model:show="dialogShow" :title="dialogTitle"> 示范 </Dialog> -->
</template>

<script setup>
  const emit = defineEmits(['update:show'])
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '650px',
    },
    title: {
      type: String,
    },
    maskClosable: {
      type: Boolean,
      default: true,
    },
    maxHeight: {
      type: String,
      default: '75vh',
    },
  })
  const show = computed({
    get: () => props.show,
    set: (val) => emit('update:show', val),
  })

  const style = {
    width: props.width,
    'background-color': 'rgba(230, 234, 243, 0.4)',
    'backdrop-filter': 'blur(10px)',
    'border-color': '#F9FBFF',
  }
  const headerStyle = {
    'background-color': 'rgba(255, 255, 255, 0.4)',
    'border-radius': '20px 20px 0px 0px',
    height: '46px',
    'line-height': '46px',
    padding: '16px 24px 12px 24px',
    'font-weight': 'bold',
    'font-size': '16px',
    color: '#4D5E80',
  }
  const contentStyle = {
    'border-radius': '0 0 20px 20px',
    padding: '32px 24px 24px 24px',
    'max-height': props.maxHeight,
    overflow: 'auto',
  }
</script>

<style lang="scss" scoped></style>
